<template>
	<view>
		<scroll-view class="scrollView" scroll-y="true">
			<view class="goodsData">
				<view class="goodsTips">
					<view class="tipsTitle">商品名称<text class="tips">*</text></view>
					<view class="tipsContent"><input type="text" name="name" v-model="goodsInfo.name" placeholder="请填写商品名称"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>

				<view class="goodsTips">
					<view class="tipsTitle">商品售价<text class="tips">*</text></view>
					<view class="tipsContent"><input type="digit" name="name" v-model="goodsInfo.sell_price" placeholder="请填写商品售价"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>

				<view class="goodsTips">
					<view class="tipsTitle">商品原价<text class="tips">*</text></view>
					<view class="tipsContent"><input type="digit" name="name" v-model="goodsInfo.market_price"
							placeholder="请填写商品原价" placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
				<view class="goodsTips">
					<view class="tipsTitle">商品成本价</view>
					<view class="tipsContent"><input type="digit" name="name" v-model="goodsInfo.cost_price" placeholder="请填写商品成本价"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
				<view class="goodsTips">
					<view class="tipsTitle">商品库存<text class="tips">*</text></view>
					<view class="tipsContent"><input type="number" name="name" v-model="goodsInfo.stock" placeholder="请填写商品库存"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
				<view class="goodsTips">
					<view class="tipsTitle">产品规格</view>
					<view class="tipsContent"><input type="text" name="name" v-model="goodsInfo.selling_point " placeholder="请输入产品规格"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
				<view class="goodsTips">
					<view class="tipsTitle">消费须知</view>
					<view class="tipsContent"><input type="text" name="name" v-model="goodsInfo.buy_notice" placeholder="周一至周日可使用"
							placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
				<view class="goodsTips">
					<view class="tipsTitle">有效时限</view>
					<view class="tipsContent">
						<picker @change="cateChange" :value="cindex" :range="cateArr">
							<view class="picker">{{ cateArr[cindex] }}</view>
						</picker>
						<uv-icon name="arrow-right" color="#3d3d3d" bold size="16"></uv-icon>
					</view>
				</view>
				<view class="goodsTips" style="border:none;padding-bottom: 0;margin-bottom:22rpx;">
					<view class="tipsTitle">商品排序</view>
					<view class="tipsContent"><input type="number" name="name" v-model="goodsInfo.sort"
							placeholder="不填则按照时间先后排序" placeholder-style="color:#888;font-size:26rpx;"></input></view>
				</view>
			</view>

			<view class="goodsData">
				<view class="goodsTipsS">
					<view class="tipsTitle">商品主图<text class="tips">*</text></view>
					<uv-upload :fileList="fileList1" name="1" multiple :maxCount="50" @afterRead="afterRead" @delete="deletePic"></uv-upload>
				</view>
			</view>

			<view class="goodsData">
				<view class="goodsTips" style="border:none;padding-bottom: 0;margin-bottom:22rpx;">
					<view class="tipsTitle">商品状态<text class="tips">*</text></view>
					<radio-group class="radioGroup" name="status" @change="bindStatusChange">
						<label>
							<radio value="1" :checked="radioValue == 1 ? true:false" color="red"></radio> 上架
						</label>
						<label>
							<radio value="0" :checked="radioValue == 0 ? true:false" color="red"></radio> 下架
						</label>
					</radio-group>
				</view>
			</view>
		</scroll-view>

		<view class="submitBtn" @click="submitBtn()" v-if="opt.id == undefined">提交</view>
		<view class="submitBtnS" v-else>
			<view class="delete" @click="deleteBtn()">删除该商品</view>
			<view class="modify" @click="submitBtn()">确认修改</view>
		</view>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading: false,
				opt: {}, //浏览器参数对象
				goodsInfo: {}, //商品信息对象
				fileList1: [], //存放图片list(用于展示回显)
				imageList:[],//存放图片list(用于传至后台,因有缩略图及原图两个对象,需多拿一个数组存放)
				cateArr: ['1天', '3天', '7天', '30天', '365天', '永久有效'], //有效时限list
				cindex: 2, //默认展示有效时限的下表
				radioValue:1,//上架状态,0:下架 1:上架
				bid:0,//商户ID
			}
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			if(this.opt.id != undefined){
				this.loading = true;
				this.getGoodsData();
			}
		},

		methods: {
			getGoodsData(){
				let _this = this;
				app.get("ApiBusinessProduct/details", {id:_this.opt.id}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
					}else{
						let data = res.data;
						let imageList = data.pics;
						_this.goodsInfo = data;
						_this.radioValue = data.upper_status;
						imageList.forEach(item=>{
							_this.fileList1.push({
								url:item.image
							});
							_this.imageList.push(item);
						})
						if(data.effective_day != 0){
							let effective_day = _this.cateArr.indexOf(data.effective_day+'天');
							_this.cindex = effective_day;
						}else{
							_this.cindex = _this.cateArr.length - 1;
						}
					}
				});
			},
			
			//删除商品
			deleteBtn(){
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '确认删除该商品吗?',
					success: function(res) {
						if (res.confirm) {
							app.post('ApiBusinessProduct/delete', {
								id:_this.opt.id,//商品ID,用于修改商品
							}, function (res) {
								app.showLoading(false);
								app.error(res.msg);
								if (res.status == 1) {
									app.error('商品删除成功！');
									setTimeout(function () {
										app.goback();
									}, 1500);
								}else{
									app.alert(res.msg);
								}
							});
						}
					}
				});
			},
			
			//提交事件
			submitBtn(){
				let effective_day = 0;
				let _this = this;
				let ajaxUrl = '';
				if (this.goodsInfo.name == '' || this.goodsInfo.name == undefined) {
					app.error('请填写商品名称');
					return false;
				}
				if (this.goodsInfo.sell_price == '' || this.goodsInfo.sell_price == undefined) {
					app.error('请填写商品售价');
					return false;
				}
				if(this.goodsInfo.market_price == '' || this.goodsInfo.market_price == undefined){
					app.error('请填写商品原价');
					return false;
				}
				if(this.goodsInfo.stock == '' || this.goodsInfo.stock == undefined){
					app.error('请填写库存');
					return false;
				}
				if(this.imageList.length == 0){
					app.error('请上传商品图片');
					return false;
				}
				if(this.cateArr[this.cindex] == '永久有效'){
					effective_day = 0;
				}else{
					effective_day = parseInt(_this.cateArr[_this.cindex]);
				}
				if(this.opt.id == undefined){
					ajaxUrl = 'ApiBusinessProduct/create';
				}else{
					ajaxUrl = 'ApiBusinessProduct/update';
				}
				app.post(ajaxUrl, {
					id:_this.opt.id,//商品ID,用于修改商品
					bid:_this.opt.bid,//商户ID
					name:_this.goodsInfo.name, //商品名称
					pics:_this.imageList,//图片list(其中包含缩略图,原图两个对象)
					market_price:_this.goodsInfo.market_price,//市场价,也是原价
					sell_price:_this.goodsInfo.sell_price,//售价
					cost_price:_this.goodsInfo.cost_price,//成本价
					stock:_this.goodsInfo.stock,//库存
					sort:_this.goodsInfo.sort,//排序
					effective_day:effective_day, //核销有效天数
					buy_notice:_this.goodsInfo.buy_notice,//购买须知
					upper_status:_this.radioValue,//上架状态
					selling_point:_this.goodsInfo.selling_point,//产品规格
				}, function (res) {
					app.showLoading(false);
					if (res.status == 1) {
						if(_this.opt.id == undefined){
							app.error('新增商品成功');
						}else{
							app.error('修改商品信息成功');
						}
						setTimeout(function () {
							app.goback();
						}, 1500);
					}else{
						app.alert(res.msg);
					}
				});
			},
			
			// 商品类目改变 触发
			cateChange: function(e) {
				this.cindex = e.detail.value;
			},
			
			//上架下架选择事件
			bindStatusChange(e){
				this.radioValue = e.detail.value;
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.imageList.splice(event.index, 1);
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			//上传事件
			uploadFilePromise(url) {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://test.jhwl.site/ApiBusinessProduct/upload&aid=1&platform=wx', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						success: (res) => {
							let data = JSON.parse(res.data);
							_this.imageList.push(data.data);
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	radio {
		transform: scale(0.7);
		margin-left:10rpx;
		margin-top:-10rpx;
	}

	checkbox {
		transform: scale(0.6);
	}

	.scrollView {
		width: 100%;
		float: left;
		height: calc(100vh - 150rpx);
	}

	.goodsData {
		width: 94%;
		float: left;
		margin: 25rpx 3% 0 3%;
		padding: 20rpx 0 10rpx 0;
		border-radius: 15rpx;
		background-color: #fff;
	}

	.boxTitle {
		width: 92%;
		float: left;
		line-height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		margin: 0 4% 6rpx 4%;
	}

	.goodsTips {
		width: 92%;
		float: left;
		display: flex;
		margin: 20rpx 4% 32rpx 4%;
		padding-bottom: 25rpx;
		border-bottom: 1px solid #f7f7f7;
		justify-content: space-between;
	}

	.goodsTipsS {
		width: 92%;
		float: left;
		margin: 15rpx 4% 0rpx 4%;
		padding-bottom: 10rpx;
	}

	.tipsTitle {
		width: 200rpx;
		float: left;
		margin-right: 20rpx;
		color: #3d3d3d;
		font-weight: bold;
		font-size: 24rpx;
		letter-spacing: 0.1px;
		display: flex;
		align-items: center;
	}

	.uploadBox {
		width: 100%;
		float: left;
		margin-top: 25rpx;
	}

	.tipsContent {
		width: calc(100% - 220rpx);
		text-align: right;
		font-size: 26rpx;
		color: #232323;
		display: flex;
		justify-content: flex-end;
	}

	.tips {
		color: red;
		margin: 0 0 0 10rpx;
	}

	.goodsData input {
		text-align: right;
	}

	.radioGroup {
		font-size: 26rpx;
	}

	.submitBtn {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 40rpx;
		line-height: 80rpx;
		background-color: #FC4C48;
		font-weight: bold;
		font-size: 28rpx;
		color: #fff;
		border-radius: 50px;
		text-align: center;
	}
	
	.submitBtnS{
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		color:#fff;
	}
	
	.delete{
		width:35%;
		float:left;
		background-color: #bdbdbd;
		border-radius: 50px;
	}
	
	.modify{
		width:62%;
		margin-left:3%;
		float:left;
		background-color: #FC4C48;
		border-radius: 50px;
	}

	::v-deep .uni-radio-wrapper {
		margin-top: -8rpx;
	}

	::v-deep .uni-label-pointer {
		margin-left: 20rpx;
	}

	::v-deep .uni-radio-input {
		border-radius: 5px;
	}

	::v-deep .tipsContent .uni-input-input {
		color: #3d3d3d;
	}

	::v-deep .tipsContent .picker {
		color: #3d3d3d;
		margin-right: 15rpx;
	}
	
	::v-deep .uv-upload{
		width: 100%;
		float: left;
		margin-top: 25rpx;
	}
</style>